<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js Demo</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="Stats-output"></div>
  
  <script src="../lib/three.js"></script>
  <script src="../lib/OrbitControls.js"></script>
  <script src="../lib/stats.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
  <script>
    const scene = new THREE.Scene(window.innerWidth, window.innerHeight);
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    // var helper = new THREE.CameraHelper( camera );
    // scene.add(helper);
    var gridHelper = new THREE.GridHelper(10, 10);
    scene.add( gridHelper );
    const renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    const geometry = new THREE.BoxGeometry(2, 2, 2);
    const texture = new THREE.TextureLoader().load("../texture/mosaic.jpg");
    const material = new THREE.MeshLambertMaterial({ map: texture });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    const ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);
    const point = new THREE.PointLight(0xffffff);
    point.position.set(3, 2, 4);
    scene.add(point);
    const pointLightHelper = new THREE.PointLightHelper( point, 1 );
    scene.add( pointLightHelper );
    var axesHelper = new THREE.AxesHelper( 5 );
    scene.add( axesHelper );

    const args = {
      xSpeed: 0,
      ySpeed: 0,
      zSpeed: 0
    };
    const gui = new dat.GUI();
    gui.add(args, 'xSpeed', 0, 0.5);
    gui.add(args, 'ySpeed', 0, 0.5);
    gui.add(args, 'zSpeed', 0, 0.5);

    const stats = initStats();
    function initStats() {
      var stats = new Stats();
      //设置统计模式
      stats.setMode(0); // 0: fps, 1: ms
      //统计信息显示在左上角
      stats.domElement.style.position = 'absolute';
      stats.domElement.style.left = '0px';
      stats.domElement.style.top = '0px';
      //将统计对象添加到对应的<div>元素中
      document.getElementById("Stats-output").appendChild(stats.domElement);
      return stats;
    }

    var controls = new THREE.OrbitControls( camera, renderer.domElement );
    function animate() {
      requestAnimationFrame(animate);
      cube.rotateX(args.xSpeed);
      cube.rotateY(args.ySpeed);
      cube.rotateZ(args.zSpeed);
      controls.update();
      stats.update();
      // cube.rotation.y += 0.01;
      // cube.rotation.z += 0.01;
      renderer.render(scene, camera);
    }
    camera.position.z = 6;
    animate();
    window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth/window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });
  </script>
</body>
</html>